<script setup lang="ts">
import { onMounted, ref } from "vue";

import DeploySimpleInfoCard from "./DeploySimpleInfoCard.vue";
import DeployStatus from "./DeployStatus.vue";
import { useDeployDetailsProvider } from "./detailsProvider";
import DeployEnvs from "./DeployEnvs.vue";
import KResourceMetadata from "@/views/domain/kubeHud/views/k8s/components/KResourceMetadata.vue";

const { deployDetails, deployPods, loading } = useDeployDetailsProvider();
const activeTab = ref("resource");
const tabList = [
  { label: "资源状态", value: "resource" },
  { label: "修改记录", value: "history" },
  { label: "元数据", value: "metadata" },
  { label: "监控", value: "monitor" },
  { label: "环境变量", value: "env" },
  { label: "事件", value: "event" }
];
</script>

<template>
  <div v-loading="loading" class="info-wrapper">
    <div class="info-simple">
      <DeploySimpleInfoCard
        v-if="deployDetails"
        :metadata="deployDetails?.metadata"
      />
    </div>
    <div class="info-body">
      <div class="info-header">
        <el-segmented
          v-model="activeTab"
          :options="tabList"
          :props="{ label: 'label', value: 'value', disabled: 'disabled' }"
          block
        />
      </div>
      <div v-if="deployDetails && activeTab === 'resource'" class="info-main">
        <DeployStatus :deployment="deployDetails" :pods="deployPods" />
      </div>
      <div
        v-else-if="deployDetails && activeTab === 'metadata'"
        class="info-main"
      >
        <KResourceMetadata v-model:model-value="deployDetails.metadata" />
      </div>
      <div v-else-if="deployDetails && activeTab === 'env'" class="info-main">
        <DeployEnvs
          :containers="deployPods.flatMap(pod => pod.spec.containers || [])"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.info-wrapper {
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;

  --k-simple-info-card-width: 250px;

  .info-simple {
    width: var(--k-simple-info-card-width);
    border-radius: 10px;
    background-color: var(--el-bg-color);
  }

  .info-body {
    height: 100%;
    width: calc(100% - var(--k-simple-info-card-width));
    display: flex;
    flex-direction: column;
    gap: 10px;
    // width: 100%;
    .info-header {
      width: 50vw;
      min-width: 500px;
      .el-segmented {
        --el-segmented-item-selected-color: var(--el-color-white);
        --el-segmented-item-selected-bg-color: #2f3e70;
        --el-border-radius-base: 8px;
        padding: 2px;
        background-color: var(--el-segmented-item-selected-color);
        min-height: 40px;
      }
    }

    .info-main {
      flex: 1;
      width: 100%;
      // background-color: var(--el-bg-color);
    }
  }
}
</style>
